<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>权限管理</title>
		<link rel="stylesheet" href="/css/font.css">
		<link rel="stylesheet" href="/css/xadmin.css">
		<link rel="stylesheet" href="/zTree_v3/css/demo.css">
		<link rel="stylesheet" href="/zTree_v3/css/zTreeStyle/zTreeStyle.css">
		<style type="text/css">
			#treeDemo {
				margin: 30px auto;
				overflow-y: auto;
				width: 600px;
				height: 260px;
				background: #f5f5f5;
				border: 1px solid #cfcfcf;
			}
			#saveAclBtn {
				width: 180px;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div style="text-align: center;" id="app">
		    <input type="hidden" name="sysUserId" th:attr="value=${ sysUserId }">
		    <ul id="treeDemo" class="ztree"></ul>
			<button id="saveAclBtn" class="layui-btn layui-btn-normal" onclick="saveBanUrl()">保 存</button>
		</div>
	</body>
	<script type="text/javascript" src="/js/jquery.min.js"></script>
	<script type="text/javascript" src="/zTree_v3/js/jquery.ztree.all.js"></script>
	<script type="text/javascript" src="/zTree_v3/js/jquery.ztree.core.js"></script>
	<script type="text/javascript" src="/zTree_v3/js/jquery.ztree.excheck.js"></script>
	<script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript" src="/js/xadmin.js"></script>
    <script type="text/javascript" src="/js/vue.min.js"></script>
	<script >
	   // zTree 的参数配置
	   var setting = {
		   check: {
                enable: true,
                chkDisabledInherit: true
            },
            data: {
                simpleData: {
					// 使用简单数据格式(即节点中不带childen)
                    enable: true,
                    rootPId: 0
                }
            }
	   };
	   
	   var vm = new Vue({
           el : '#app',
           data : {
        	   zNodes: [],
        	   zTreeObj: "",
        	   sysAcl: "",
        	   sysUserId: ""
           },
           created : function() {
        	   this.sysUserId = $("input[name='sysUserId']").val();
               // 获取权限树
               this.sysUserAclTree();
           },
           methods : {
        	   sysUserAclTree: function() {
                   var vm = this;
                   $.ajax({
                       url : "/sys/sysUser/sysUserAclTree",
                       data:{
                    	   sysUserId: this.sysUserId
                       },
                       type : "get",
                       success : function(result) {
                           if (result.state) {
                               vm.sysAcl = result.data;
                               vm.createAclTree();
                           } else {
                               layui.use(['layer'], function(){
                                   var layer = layui.layer
                                   layer.msg(""+result.msg, {icon: 5});
                               });
                           }
                       }
                   });
               },
               // 构建权限树
               createAclTree: function() {
                   $.each(vm.sysAcl, function(n, value){
                       vm.zNodes.push({
                           id: value.id,
                           pId: value.pId,
                           name: value.name,
                           banUrl: value.banUrl,
                           nocheck: value.nocheck == 1 ? true : false,
                           checked: value.checked == 1 ? true : false
                       });
                   });
                   vm.zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, vm.zNodes);
               }
           }
       });
	   
	   // 保存按钮
	   function saveBanUrl() {
		   // 获取输入框勾选状态被改变的节点集合（与原始数据 checkedOld 对比）
		   // 如果节点原来是勾选状态,取消后也会被这个方法获取
		   var checkedNodes = vm.zTreeObj.getChangeCheckedNodes();
		   var addBanUrl = [];
		   var delBanUrl = [];
		   $.each(checkedNodes, function(n, value){
			   if (value.checked) {
				   addBanUrl.push(value.banUrl);
			   } else {
				   delBanUrl.push(value.banUrl);
			   }
           });
		   $.ajax({
               url : "/sys/sysUser/updateBanUrl",
               traditional: true,
               data: {
            	   addBanUrl: addBanUrl,
            	   delBanUrl: delBanUrl,
            	   sysUserId: vm.sysUserId
               },
               type : "post",
               success : function(result) {
                   if (result.state) {
                	   layer.msg('保存成功！', {icon: 1,time: 1000}, function(){
                           // 1.先得到当前iframe层的索引
                           var index = parent.layer.getFrameIndex(window.name); 
                           // 2.再执行关闭 
                           parent.layer.close(index); 
                       });
                   } else {
                	   layer.msg("" + result.msg, {
                           icon: 5
                       });
                   }
               }
           });
	   }
	   
  </script>
</html>
